<!--
 * @Description: 测试canvas绘图
 * @Author: ZhangHan
 * @Date: 2025-08-25 17:49:49
 * @LastEditTime: 2025-08-26 14:58:15
 * @LastEditors: ZhangHan
-->
<template>
  <view>
    <canvas class="canvas" ref="canvasbox" canvas-id="canvasbox"></canvas>
    <button @click="drawImg">选择图片绘制</button>
    <button @click="drawText">绘制多行文本</button>
    <button @click="drawStar">绘制红色背景和黄色五角星</button>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, nextTick, reactive } from "vue";
import { drawNormalText, getCanvasSize } from "@/utils/canvas";
const canvasbox = ref<HTMLCanvasElement | null | any>(null);
const instance = getCurrentInstance();

onMounted(() => {
  console.log("onMounted", instance);
  nextTick(() => {
    drawCanvas();
  });
});
//绘制的文字列表
const textList = ["测试canvas绘图", "测试canvas绘图2", "测试canvas绘图3"];
async function drawCanvas() {
  try {
    const context = uni.createCanvasContext("canvasbox");
    //获取canvas画布的实际尺寸
    const res = await getCanvasSize(".canvas", instance?.proxy);
    if (res) {
      // 使用实际尺寸清除整个画布
      context.clearRect(0, 0, res.width, res.height);
      context.setFillStyle("yellow");
      context.fillRect(0, 0, res.width, res.height);
      textList.forEach((item, index) => {
        // 绘制文本-水平垂直居中
        drawNormalText(
          context,
          item,
          res.width / 2, // x轴
          // res.height / 2, // y轴
          20 * (index + 0.5 + (index + 0.5) * 3), //y轴承 行距
          36,
          "red",
          "center",
          "middle"
        );
      });
      // 绘制到画布
      context.draw();
    }
  } catch (e: any) {
    console.log(e);
  }
}
//选择图片并绘制到画布
async function drawImg() {
  const ctx = uni.createCanvasContext("canvasbox");
  const res = await getCanvasSize(".canvas", instance?.proxy);
  if (res) {
    // 使用实际尺寸清除整个画布
    ctx.clearRect(0, 0, res.width, res.height);
  }
  uni.chooseImage({
    success: function (res) {
      console.log("🚀 ~ drawImg ~ res:", res);
      ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
      ctx.draw();
    },
  });
}

// 绘制多行文本
async function drawText() {
  const ctx = uni.createCanvasContext("canvasbox");
  const res = await getCanvasSize(".canvas", instance?.proxy);
  if (res) {
    ctx.clearRect(0, 0, res.width, res.height);
    ctx.setFillStyle("white");
    ctx.fillRect(0, 0, res.width, res.height);

    textList.forEach((item, index) => {
      drawNormalText(
        ctx,
        item,
        res.width / 2,
        50 * (index + 1),
        36,
        "black",
        "center",
        "middle"
      );
    });

    ctx.draw();
  }
}

// 绘制红色背景和黄色五角星
async function drawStar() {
  const ctx = uni.createCanvasContext("canvasbox");
  const res = await getCanvasSize(".canvas", instance?.proxy);
  if (res) {
    // 清除画布并设置红色背景
    ctx.clearRect(0, 0, res.width, res.height);
    ctx.setFillStyle("red");
    ctx.fillRect(0, 0, res.width, res.height);

    // 计算中心点
    const centerX = res.width / 2;
    const centerY = res.height / 2;
    const radius = Math.min(res.width, res.height) * 0.2; // 五角星大小

    // 绘制黄色五角星
    ctx.setFillStyle("yellow");
    ctx.beginPath();

    // 五角星的五个顶点
    for (let i = 0; i < 5; i++) {
      const angle = (Math.PI * 2 * i) / 5 - Math.PI / 2;
      const x = centerX + Math.cos(angle) * radius;
      const y = centerY + Math.sin(angle) * radius;

      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }

      // 内顶点
      const innerAngle = angle + Math.PI / 5;
      const innerX = centerX + Math.cos(innerAngle) * (radius * 0.5);
      const innerY = centerY + Math.sin(innerAngle) * (radius * 0.5);
      ctx.lineTo(innerX, innerY);
    }

    ctx.closePath();
    ctx.fill();
    ctx.draw();
  }
}
</script>
<style scoped lang="scss">
.canvas {
  width: 100vw;
  height: 50vh;
  box-sizing: border-box;
  border: 2rpx solid black;
}
</style>
